<template>
	<view class="page-content-box">
		<view class="page-map-select">
			<map style="width: 100vw; height: 50vh;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</view>
		<view class="shop-list-content">
			<view class="near-shop">
				附近店铺
			</view>
			<block v-for="(item, index) in shopList" :key="index">
				<view class="shop-name-address" @tap="changeShopMap(item.latitude, item.longitude)">
					<view class="shop-content">
						<text class="shop-name">{{item.name}}</text>
						<text class="shop-address">{{item.addr}}</text>
					</view>
					<navigator url="/pages/index/index" open-type="switchTab" hover-class="none" @tap="setDeskNumber(item.number, item.name)">
						<button>选择</button>
					</navigator>
				</view>
			</block>
		</view>
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				latitude: 21.266277,
				longitude: 110.392898,
				covers: [{
						latitude: 21.266277,
						longitude: 110.392898,
						width: 24,
						height: 24,
						// iconPath: '../../static/location1.jpg'
				}],
				shopList: []
			}
		},
		onLoad() {
			this.getInitData();
		},
		onShow() {
			uni.setNavigationBarColor({
			    frontColor: '#000000',
			    backgroundColor: '#FDA600'
			})
		},
		methods: {
			getInitData(){
				var _this = this;
				var params = {
					p: 1,
					pageSize: 30
				}
				this.$client.get('//api/index/shoplist', params, function(res, message){
					_this.shopList = res.list;
					// console.log(_this.shopList);
					// 对数据进行处理
				},function(res){})
			},
			changeShopMap(shopLatitude, shopLongitude){
				this.latitude = shopLatitude;
				this.longitude = shopLongitude;
				this.covers[0].latitude = shopLatitude;
				this.covers[0].longitude = shopLongitude;
			},
			setDeskNumber(deskNumber,deskName){
				uni.setStorageSync('deskNumber', deskNumber);
				uni.setStorageSync('deskName', deskName);
			}
		}
	}
</script>

<style>
.page-content-box .shop-list-content{
	position: fixed;
	background-color: #ffffff;
	height: 60vh;
	border-top-left-radius: 50rpx;
	border-top-right-radius: 50rpx;
	padding: 20rpx;
	bottom: 0;
	left: 0;
	right: 0;
}
.page-content-box .shop-list-content .placeholder{
	width: 710rpx;
	height: 40rpx;
	text-align: center;
	padding-top: 40rpx;
	font-size: 32rpx;
	line-height: 40rpx;
	color: #c3c3c3;
	margin-bottom: 30rpx;
}
.page-content-box .shop-list-content .near-shop{
	display: inline-block;
	font-size: 32rpx;
	color: #171717;
	font-weight: bold;
	border-bottom: 5rpx solid #ffcc00; 
	margin-bottom: 12rpx;
	margin-top: 12rpx;
}
.page-content-box .shop-list-content .shop-name-address{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #c3c3c3;
	margin-bottom: 12rpx;
}

.page-content-box .shop-list-content .shop-name-address .shop-content{
	display: flex;
	flex-flow: column nowrap;
}

.page-content-box .shop-list-content .shop-name-address .shop-name{
	font-size: 36rpx;
}

.page-content-box .shop-list-content .shop-name-address .shop-address{
	color: #c3c3c3;
}
.page-content-box .shop-list-content .shop-name-address button{
	background-color: #007AFF;
	width: 120rpx;
	height: 56rpx;
	font-size: 28rpx;
	line-height: 56rpx;
	color: #F0F0F0;
}

</style>
